@import "../../../mixins/shapes/bubble.less";

/* variables */
@padding-max:20px;
@padding-med:10px;
@padding-min:5px;

@margin-max:20px;
@margin-med:10px;
@margin-min:5px;


html, body {
	height:100%;
}

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
* { margin:0; padding:0 }

body {
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
	font-size:100%;
	color:#000;
	line-height:150%;
	padding:@padding-max;
}

h1 {
	font-size:3em;
	
	margin:@margin-med 0;
}

h2 {
	font-size:2.5em;
}

h3 {
	font-size:2em;
}

h4 {
	font-size:1.5em;
}

h5 {
	font-size:1.2em;
}

h6 {
	font-size:1em;
}



pre {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

.usage, .usage pre { 
	color:#333;
}

@bubblecolor: #e33100;
@bubblehover: #872300;

.bubble1 {
	.bubble(40%, 200px, 20px 20px 70px 20px, @padding-max, @bubblecolor, @bubblehover, 20%, 10px, 50px);
	color:#fff;
}

.bubble2 {
	.bubble(200px, auto, @margin-max, @padding-max, #1337AD, darken(#1337AD, 10%), 50%, 15px, 20px);
	color:#fff;
}

.bubble3 {
	.bubble(500px, 500px, @margin-max, 50px, #91bd09, #749a02, 50%, 150px, 20px);
	float:left;
	color:#fff;
}

.bubble4 {
	.bubble(500px, 500px, @margin-max, 20px 150px, #a9014b, lighten(#a9014b, 20%), 50%, 250px, 20px);
	float:left;
	color:#fff;
	display:table;
	div {
		display:table-cell; 
		vertical-align:middle;
	}
}

.bubble5 {
	.bubble(200px, 200px, 20px, 20px, #f00, #c00, 25%, 20px, 20px);
}

